<script setup lang="ts">
import {ref, computed} from 'vue'
import {DetailPanelHeaders, DetailPanelPages} from "@/components/DetailPanel/type";

const {title, pages = [], headers = [], size = '860px'} = defineProps<{
  title: string
  size?: string | number//抽屉宽度
  headers?: DetailPanelHeaders[]//顶部配置
  pages?: DetailPanelPages[]//页面配置
}>()

//选项卡
const pane = ref<string>(pages.length > 0 ? pages[0].key : '')


/**
 * 动态计算容器高度
 */
const height = computed(() => {
  if (headers.length > 0) {
    return 'calc(100vh - 172px)'
  }
  return 'calc(100vh - 65px)'
})
</script>
<template>
  <div class="detail-panel">
    <el-drawer v-bind="$attrs" :close-on-click-modal="false" destroy-on-close :close-on-press-escape="false" :title :size>
      <el-descriptions v-if="headers.length > 0" direction="vertical" :column="headers.length" border>
        <el-descriptions-item v-for="(item,index) in headers" :label="item.label" :key="index">
          {{ item.value }}
        </el-descriptions-item>
      </el-descriptions>
      <app-interval :background="true" v-if="headers.length>0"></app-interval>
      <el-tabs :style="{height}" v-model="pane" v-if="pages.length > 0" border stretch>
        <el-tab-pane lazy v-for="item in pages" :key="item.key" :label="item.label" :name="item.key">
          <el-scrollbar :height="`calc(${height} - 40px)`">
            <slot :name="item.key"></slot>
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>
    </el-drawer>
  </div>
</template>